<template>
  <div>
    <h2 ref="life">生命周期</h2>
    {{ num }}
    <button @click="num+=1">点我</button>
  </div>
</template>

<script>
export default {
    name: "life-com",
    
    data() {
        return {
            list: [],
            num: 888,
            timer: setInterval(() => {

            }, 1000)
        }
    },
    beforeCreate() {
        console.log('实例化之前')
    },
    created() {
        // 初始化
        // 在created中可以操作this   this.$refs
        console.log('实例完成')
        console.log(this.$refs.life)

    },
    beforeMount() {
        console.log('dom渲染之前')
    },
    mounted() {
        console.log('dom结构渲染完毕')
        console.log(this.$refs.life)
    },
    // 视图中的数据更新之前
    beforeUpdate() {
        console.log('数据更新了')
        console.log(this.num)
    },
    updated() {
        console.log('数据更新完成')
    },
    // 组件销毁之前
    beforeDestroy() {
        
    },
    // 组件销毁完毕
    destroyed() {

    }
}
</script>

<style>

</style>